<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<template>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="复选框 A"></el-checkbox>
						<el-checkbox label="复选框 B"></el-checkbox>
						<el-checkbox label="复选框 C"></el-checkbox>
						<el-checkbox label="禁用" disabled></el-checkbox>
						<el-checkbox label="选中且禁用" disabled></el-checkbox>
					</el-checkbox-group>
				</template>
			</div>
			<hr />

			<div>
				<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
					@change="handleCheckAllChange">全选</el-checkbox>
				<div style="margin: 15px 0;"></div>
				<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
					<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
				</el-checkbox-group>
			</div>
			<hr />

			<template>
				<div style="margin-top: 20px">
					<el-checkbox-group v-model="checkboxGroup2" size="medium">
						<el-checkbox-button v-for="city in cities" :label="city"
							:key="city">{{city}}</el-checkbox-button>
					</el-checkbox-group>
				</div>
				<div style="margin-top: 20px">
					<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
						<el-checkbox-button v-for="city in cities" :label="city"
							:key="city">{{city}}</el-checkbox-button>
					</el-checkbox-group>
				</div>
			</template>
			<hr />

			<template>
				<div>
					<el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
					<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
				</div>
				<div style="margin-top: 20px">
					<el-checkbox-group v-model="checkboxGroup1" size="small">
						<el-checkbox label="备选项1" border></el-checkbox>
						<el-checkbox label="备选项2" border disabled></el-checkbox>
					</el-checkbox-group>
				</div>
			</template>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				checkList: ['选中且禁用', '复选框 A'],
				checkAll: false,
				checkedCities: ['上海', '北京'],
				cities: ['上海', '北京', '广州', '深圳'],
				isIndeterminate: true,
				checkboxGroup1: ['上海'],
				checkboxGroup2: ['上海'],
				checkboxGroup3: ['上海'],
				checkboxGroup4: ['上海'],
			},
			methods: {
				handleCheckAllChange(val) {
					this.checkedCities = val ? this.cities : [];
					this.isIndeterminate = false;
				},
				handleCheckedCitiesChange(value) {
					let checkedCount = value.length;
					this.checkAll = checkedCount === this.cities.length;
					this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
				}
			}
		})
	</script>
</html>